<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<table id="tabl">
	
</table>
<button onclick="update()">添加</button>
<div id="fom1">
<form  id="updateusers">
	姓名：<input type="text" name="name"><br>
	年龄：<input type="number" name="age"><br>
	性别：男<input type="radio" name="sex" value="男">女<input type="radio" name="sex" value="女"><br>
	段位:<select name="garde" >
		<option value="黄金">黄金</option>
		<option value="青铜">青铜</option>
		<option value="白银">白银</option>
		<option value="菜鸡">菜鸡</option>
		
	</select><br>
	<button onclick="updateOver()">确定</button>
</form>
</div>
<script type="text/javascript">
	var users = [
	{name:"张三",
	age:18,
	sex:"男",
	grade:"黄金"
  },{
  	name:"李四",
	age:12,
	sex:"男",
	grade:"白银",
  },{
  	name:"王五",
	age:22,
	sex:"男",
	grade:"菜鸡"
  },{
  	name:"老张",
	age:58,
	sex:"男",
	grade:"王者",
  },
]

function showTable(){
	var str=`<tr>
		<th>姓名</th>
		<th>年龄</th>
		<th>性别</th>
		<th>段位</th>
		<th>编辑</th>
	</tr>`;
for(var i in users){
	str+="<tr>"
	for(var j in users[i]){
		str+="<td>"+users[i][j]+"</td>"
			}
			str+=`<td><a href="javascript:del(${i})">x</a></td>`
			str+=`<td><a href="javascript:update(${i})">修改</a></td>`
			str+="</tr>";
			
}
document.querySelector('#tabl').innerHTML=str;
}
function del(line) {
	delete users[line];
	showTable();
}
function update(line) {
	var fomr =document.querySelector('#updateusers');
	curentBeFixLine=line;
	for (var i in users[line]){
		fomr[i].value = users[line][i];
	}
}
	function updateOver(){
		var fomr = document.querySelector('#updateusers');
		for(var i in users[curentBeFixLine]){
			users[curentBeFixLine][i]=fomr[i].value;
		}
		showTable();
	}
</script>
	
</body>
</html>